import React, { useState } from 'react';
import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
} from "@/components/ui/drawer";
import FundsStatisticsThisMonthCard from './FundsStatisticsThisMonthCard.jsx';
import FundsStatisticsThisWeekCard from './FundsStatisticsThisWeekCard.jsx';
import FundsStatisticsRankingChart from './FundsStatisticsRankingChart.jsx';
export default function ({ weekStatistics, monthStatistics, day, month }) {
    const [showFundsRanking, setShowFundsRanking] = useState(false);
    const [fundsRankingTitle, setFundsRankingTitle] = useState('');
    const [fundsDetails, setFundsDetails] = useState([]);
    const [onFundsFilter, setOnFundsFilter] = useState();
    const [rankingData, setRankingData] = useState([]);
    const onChartClick = (title, data, details, onFilter) => {
        setShowFundsRanking(true);
        setFundsRankingTitle(title);
        setRankingData(data);
        setFundsDetails(details);
        setOnFundsFilter(() => onFilter);
    };
    return (
        <div className="w-full">
            <FundsStatisticsThisWeekCard statisticsData={weekStatistics} className="mt-2" onChartClick={onChartClick} day={day}></FundsStatisticsThisWeekCard>
            <FundsStatisticsThisMonthCard statisticsData={monthStatistics} className="mt-2" onChartClick={onChartClick} month={month}></FundsStatisticsThisMonthCard>

            <Drawer open={showFundsRanking} onOpenChange={value => setShowFundsRanking(value)}>
                <DrawerContent>
                    <div className="mx-auto w-full max-w-sm">
                        <DrawerHeader>
                            <DrawerTitle>{fundsRankingTitle}</DrawerTitle>
                            <DrawerDescription>View the ranking fund statistics.</DrawerDescription>
                        </DrawerHeader>
                        <div className="h-80">
                            <FundsStatisticsRankingChart data={rankingData} details={fundsDetails} onFilter={onFundsFilter} className="h-full mb-2"></FundsStatisticsRankingChart>
                        </div>
                    </div>
                </DrawerContent>
            </Drawer>
        </div>
    )
}
